<template>
  <div>
    <i-table border :columns="columns6" :data="data5"></i-table>
  </div>
</template>

<script>

  import DateUtil from '@/js/date-format'
  import DataManager from '../components/data-manager'

  export default {
    name: "model-manager",
    components: {DataManager},
    data() {
      return {
        columns6: [
          {
            title: '模型名称',
            key: 'fileName'
          },
          {
            title: '模型分类',
            key: 'type',
          },
          {
            title: '模型大小',
            key: 'fileSize',
          },
          {
            title: '创建时间',
            key: 'createTime',
            render: (h, params) => {
              return h('div',
                DateUtil.formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm')
              )
            }
          },
          {
            title: '预览图',
            key: 'imageId',
            align: 'center',
            render: (h, params) => {
              return h('img', {
                style: {//设置样式
                  width: '100px',
                  'height': '80px',
                  'border-radius': '5%'
                },
                attrs: {//设置属性
                  src: params.row.imageId
                }
              });
            }
          },
          {
            title: '正视图',
            key: 'mainViewId'
          },
          {
            title: '俯视图',
            key: 'overViewId'
          },
          {
            title: '侧视图',
            key: 'sideViewId'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params)=>{
              return h('div', [h('i-button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    // 必须写()=>否者this访问不到vue对象methods
                    this.show(params.index)
                  },
                },
              }, '编辑'), h('i-button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginLeft: '2px'
                },
                on: {
                  click: () => {
                    this.remove(params.index);
                  },
                },
              }, '删除')])
              // return h('div',`<i-button type="primary" size="small" @click="show(${index})">查看</i-button><i-button type="primary" size="small" @click="show(${index})">编辑</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`);
            }
          }
        ],
        data5: []
      }
    },
    mounted: function () {
      this.initData();
    },
    methods: {
      initData: function () {
        let slef = this
        this.$api.get('/app/v1/model/list/1/50', null, null, r => {
          slef.data5 = r.pageInfos;
        })
      },
      show(index) {
        this.$Modal.info({
          title: '用户信息',
          content: '<data-manager></data-manager>'
          // content: `姓名：${this.data5[index].fileName}<br>年龄：${this.data5[index].type}<br>地址：${this.data5[index].fileSize}`
        })
      },
      remove(index) {
        this.data5.splice(index, 1);
      }
    }
  }
</script>
<style scoped>

</style>
